<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="d-flex flex-column bd-highlight mb-3">
        <div>
            <div>
                <div class="input-group input-group-lg">
                    <span class="input-group-text" id="inputGroup-sizing-lg">标题</span>
                    <input id="title" name="title" type="text" class="form-control" aria-label="Sizing example input"
                        aria-describedby="inputGroup-sizing-lg">
                </div>
                <div>
                    文章类型
                    <select id="category" class="form-select" aria-label="Default select example">
                        <option selected value="0">Python</option>
                        <option value="1">Flask</option>
                        <option value="2">Javascript</option>
                        <option value="3">Golan</option>
                    </select>
                </div>
            </div>
            <div id="editor">

            </div>
            <div>
                <p id="showContent"></p>
            </div>
        </div>
        <button onclick="getContent(is_release=2)">发布</button>
        <button onclick="getContent(is_release=1)">保存草稿</button>
    </div>
</body>
<!-- Add the theme's stylesheet -->
<link rel="stylesheet" href="//cdn.quilljs.com/1.3.4/quill.bubble.css">
<link rel="stylesheet" href="//cdn.quilljs.com/1.3.4/quill.snow.css">

<script src="//cdn.quilljs.com/1.3.4/quill.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="{{ url_for('blog.static', filename='/js/jQuery.js') }}"></script>
<script>
    const quill = new Quill('#editor', {
        theme: 'snow'   // Specify theme in configuration
    });

    function getContent(is_release) {
        var title = document.getElementById("title").value
        // var describe = document.getElementById("describe").value
        var content = document.getElementById("editor").innerText
        // alert(content)
        var showElement = document.getElementById("showContent")
        var category = document.getElementById("category")
        var category_index = category.selectedIndex
        var category_value = category.options[category_index].text
        var category_id = category.options[category_index].value
        var blog = {
            title: title,
            // describe: describe,
            content: content,
            is_release: is_release,
            category_id: category_id
        }

        showElement.innerText = "标题：" + blog.title
        $.ajax({
            url: "http://192.168.143.101:9000/blog/create",
            method: "post",
            contentType: "application/json",
            dataType: "json",
            data: JSON.stringify(blog),
            success: function (result) {
                alert(result.msg)
            },
            error: function () {
                alert("error")
            }
        })
    }


</script>

</html>